<template>
  <div class="destinations">
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item 
          v-model="filterType" 
          :options="typeOptions" 
        />
        <van-dropdown-item 
          v-model="filterRegion" 
          :options="regionOptions" 
        />
      </van-dropdown-menu>
    </van-sticky>
    
    <van-pull-refresh 
      v-model="refreshing" 
      @refresh="onRefresh"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="destination in destinations"
          :key="destination.id"
          :title="destination.name"
          :desc="destination.description"
          :tag="destination.tag"
          :price="destination.price"
          :origin-price="destination.originPrice"
          currency="¥"
        >
          <template #thumb>
            <div class="placeholder-thumb"></div>
          </template>
          
          <template #tags>
            <van-tag plain type="primary">{{ destination.region }}</van-tag>
            <van-tag plain type="success">{{ destination.type }}</van-tag>
          </template>
          
          <template #footer>
            <van-button size="mini" @click="editDestination(destination)">编辑</van-button>
            <van-button size="mini" type="danger" @click="deleteDestination(destination)">删除</van-button>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
    
    <van-empty 
      v-if="destinations.length === 0 && !loading" 
      description="暂无目的地数据" 
    />
    
    <van-button 
      round 
      type="primary" 
      class="add-btn"
      @click="showAddForm = true"
    >
      <van-icon name="plus" /> 添加目的地
    </van-button>
    
    <!-- 添加/编辑表单 -->
    <van-popup 
      v-model:show="showAddForm" 
      position="bottom" 
      :style="{ height: '80%' }"
    >
      <van-form @submit="onSaveDestination">
        <van-nav-bar
          :title="editingDestination ? '编辑目的地' : '添加目的地'"
          left-text="取消"
          right-text="保存"
          @click-left="showAddForm = false"
          @click-right="onSaveDestination"
        />
        
        <div class="form-content">
          <van-cell-group inset>
            <van-field
              v-model="destinationForm.name"
              name="名称"
              label="名称"
              placeholder="请输入目的地名称"
              :rules="[{ required: true, message: '请输入目的地名称' }]"
            />
            
            <van-field
              v-model="destinationForm.description"
              name="描述"
              label="描述"
              type="textarea"
              rows="2"
              autosize
              placeholder="请输入目的地描述"
            />
            
            <van-field name="uploader" label="封面图">
              <template #input>
                <van-uploader v-model="destinationForm.images" multiple :max-count="3" />
              </template>
            </van-field>
            
            <van-field
              v-model="destinationForm.region"
              name="地区"
              label="地区"
              placeholder="请输入所在地区"
              :rules="[{ required: true, message: '请输入所在地区' }]"
            />
            
            <van-field
              v-model="destinationForm.type"
              name="类型"
              label="类型"
              placeholder="请输入目的地类型"
              :rules="[{ required: true, message: '请输入目的地类型' }]"
            />
            
            <van-field
              v-model.number="destinationForm.price"
              name="价格"
              label="价格"
              type="number"
              placeholder="请输入价格"
            />
            
            <van-field name="switch" label="热门推荐">
              <template #input>
                <van-switch v-model="destinationForm.isHot" />
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { showToast, showDialog } from 'vant'

const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const showAddForm = ref(false)
const editingDestination = ref(null)

const filterType = ref('all')
const filterRegion = ref('all')

const typeOptions = [
  { text: '全部类型', value: 'all' },
  { text: '自然景观', value: 'nature' },
  { text: '历史文化', value: 'culture' },
  { text: '现代都市', value: 'city' },
  { text: '主题乐园', value: 'theme' }
]

const regionOptions = [
  { text: '全部地区', value: 'all' },
  { text: '华北地区', value: 'north' },
  { text: '华东地区', value: 'east' },
  { text: '华南地区', value: 'south' },
  { text: '西南地区', value: 'southwest' },
  { text: '西北地区', value: 'northwest' }
]

const destinations = ref([
  {
    id: 1,
    name: '三亚亚龙湾',
    description: '被誉为“天下第一湾”，拥有7公里长的银白色海滩',
    tag: '热门',
    price: 888,
    originPrice: 1280,
    region: '华南',
    type: '自然景观',
    isHot: true
  },
  {
    id: 2,
    name: '北京故宫',
    description: '明清两代的皇家宫殿，世界上现存规模最大、保存最完整的木质结构古建筑之一',
    tag: '文化',
    price: 60,
    originPrice: 60,
    region: '华北',
    type: '历史文化',
    isHot: true
  },
  {
    id: 3,
    name: '上海迪士尼',
    description: '中国大陆首座迪士尼主题乐园，充满创意、冒险和刺激',
    tag: '新上',
    price: 399,
    originPrice: 500,
    region: '华东',
    type: '主题乐园',
    isHot: false
  }
])

const destinationForm = reactive({
  name: '',
  description: '',
  images: [],
  region: '',
  type: '',
  price: null,
  isHot: false
})

const onRefresh = () => {
  setTimeout(() => {
    refreshing.value = false
    showToast('刷新成功')
  }, 1000)
}

const onLoad = () => {
  setTimeout(() => {
    loading.value = false
    finished.value = true
  }, 1000)
}

const editDestination = (destination) => {
  editingDestination.value = destination
  Object.assign(destinationForm, destination)
  showAddForm.value = true
}

const deleteDestination = (destination) => {
  showDialog({
    title: '确认删除',
    message: `确定要删除 "${destination.name}" 吗？`,
    showCancelButton: true
  }).then(() => {
    const index = destinations.value.findIndex(item => item.id === destination.id)
    if (index !== -1) {
      destinations.value.splice(index, 1)
      showToast('删除成功')
    }
  }).catch(() => {
    // 取消操作
  })
}

const onSaveDestination = () => {
  if (!destinationForm.name || !destinationForm.region || !destinationForm.type) {
    showToast('请填写必填项')
    return
  }
  
  if (editingDestination.value) {
    // 编辑模式
    const index = destinations.value.findIndex(item => item.id === editingDestination.value.id)
    if (index !== -1) {
      destinations.value[index] = { ...editingDestination.value, ...destinationForm }
    }
    showToast('编辑成功')
  } else {
    // 新增模式
    const newDestination = {
      id: Date.now(),
      ...destinationForm
    }
    destinations.value.push(newDestination)
    showToast('添加成功')
  }
  
  showAddForm.value = false
  resetForm()
}

const resetForm = () => {
  Object.assign(destinationForm, {
    name: '',
    description: '',
    images: [],
    region: '',
    type: '',
    price: null,
    isHot: false
  })
  editingDestination.value = null
}
</script>

<style scoped>
.destinations {
  padding-bottom: 50px;
}

.placeholder-thumb {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.add-btn {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

.form-content {
  padding-top: 46px;
}
</style>